<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>支付</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	
		<link rel="stylesheet" href="../css/index.css" />
		<script src="html5plus://ready"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/vant.min.js" ></script>
		<script type="text/javascript" src="../js/vue-lazyload.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/listener_other.js"></script>
		<script src="../js/ajax.js"></script>
	</head>
	<body>
		<div id="app-js">
			<header>
				<van-nav-bar @click-left="onClickLeft" style="background-color:red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" style="color: white;">结算</label>
				</van-nav-bar>
			</header>
			<section>
				<van-badge-group class="margin-top">
					<van-badge title="商品清单"></van-badge>
				</van-badge-group>
				<div v-for="(item,index) in goods" style="margin-left: 20%;">
					<van-row>
						<van-col span="4">
							<img src="item.GoodsImageUrl.src" @click="indexClick(index)" onerror="this.src='../img/yjz.jpg'"
							 style="height: 100%;width: 100%;margin-top: 50%;">
						</van-col>
						<van-col span="16">
							<van-card :num="item.buyCount" :price="item.RealPrice" :title="item.Name" :origin-price="item.MarketPrice">
								<van-row slot="footer" style="margin-top: -10%;">
									<van-col span="18">
										<van-stepper v-model="item.buyCount" disable-input></van-stepper>
									</van-col>
								</van-row>
							</van-card>
						</van-col>
					</van-row>
				</div>
				<van-badge-group style="margin-top: 10px;">
					<van-badge title="收货地址"></van-badge>
				</van-badge-group>

					<van-row style="color: #999999;font-size: 1em;margin-left: 5%;margin-top: 5%;">
						<van-col span="2">
							<van-radio-group v-model="redio" style="margin-top: 45%;">
								<van-radio name="1"></van-radio>
							</van-radio-group>
						</van-col>
						<van-col span="20">{{list.name}}{{list.tel}}</van-col>
						<van-col span="20">{{list.address}}</van-col>
					</van-row>
					<van-cell-group>
					<van-cell><span id="addr" @click="dizhi" style="font-size: 15px;margin-left: 20%;">其他收货地址></span></van-cell>
				</van-cell-group>

				<van-badge-group style="margin-top: 10px;">
					<van-badge title="支付方式"></van-badge>
				</van-badge-group>

				<van-radio-group v-model="radio">
					<van-cell style="text-align: center;line-height: 100%;">

						<van-col span="5"><img src="../img/zfb.jpg" style="width: 50%; height: 50%;"></van-col>
						<van-col span="19">
							<van-radio-group v-model="radio" checked-color="#07c160">
								<van-cell-group>
									<van-cell title="支付宝支付" clickable @click="radio = '1'">
										<van-radio name="1" />
									</van-cell>
								</van-cell-group>
							</van-radio-group>
						</van-col>
						<van-col span="5"><img src="../img/wx.jpg" style="width: 50%; height: 50%;"></van-col>
						<van-col span="19">
							<van-radio-group v-model="radio" checked-color="#07c160">
								<van-cell-group>
									<van-cell title="微信支付" clickable @click="radio = '2'">
										<van-radio name="2" />
									</van-cell>
								</van-cell-group>
							</van-radio-group>
						</van-col>
					</van-cell>
				</van-radio-group>
			</section>
			<footer>
				<van-submit-bar :price="num" button-text="提交订单" @submit="onSubmit"></van-submit-bar>

			</footer>
		</div>
	</body>
	<script>
		Vue.use(VueLazyload, {
			error: "../img/yjz.jpg"
		});
		var newUser = localStorage.getItem("userdata"); //从localStorage里取数据(字符串格式)
		newUser = JSON.parse(newUser); //转换成Json格式
		var vm = new Vue({
			el: "#app-js",
			data: {
				goods: [], 
				isShow:plus.webview.currentWebview().isShow,
				phone: '', 
				address: '', 
				redio: "1",
				list: {},
				radio: '1', 
				payId: 0,
				num: 1,
			},
			
			mounted:function() {
				var _this = this;
				ajax({
					url: "http://dsapi.ysd3g.com/api/MyDefaultAddress",
					dataType: "jsonp",
					data: {
						key: localStorage.getItem("key")
					},
					success: function(res) {
						_this.list = res;
					}
				});

				var _this = this;
				var c = plus.webview.currentWebview().pids;
				var Name;
				var CoverImage;
				var RealPrice;
				ajax({
					url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
					dataType: "jsonp",
					data: {
						p: 1
					},
					success: function(res) {
						for (var i = 0; i < 1; i++) {
							Name = res.Data[i].Name;
							CoverImage = res.Data[i].GoodsImageUrl.src;
							RealPrice = res.Data[i].RealPrice;
							vm.jsonData = {
								"Name": Name,
								"CoverImage": CoverImage,
								"RealPrice": RealPrice,
								"buyCount": vm.num,
								"checked": false
							}
							vm.goods.push(vm.jsonData);
						}
					
					},

				});

			},
			methods: {
				onClickLeft: function() {
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				},
				indexClick:function(index) {
					plus.webview.create("../personcenter/wodedingdan.html", "wodedingdan", {}, {
						nId: index
					}).show();
				},
				dizhi:function(){
					plus.webview.open("../personcenter/Dizhi.html");
				},
				onSubmit: function() {//提交订单去支付
					var shoppingCartJsonStr = [];
						shoppingCartJsonStr = [{
							goodsId: 11,
							buyCount: 1
						}]
					
					var toast = vm.$toast.loading({
						duration: 0, // 持续展示 toast
						forbidClick: true, // 禁用背景点击
						message: '正在生成订单'
					});
					ajax({
						url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
						dataType: "jsonp",
						data: {
							Key: localStorage.getItem("key"),
							shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)
						},
						success:function(res) {
							if (res.Error) {
								vm.$toast.fail(res.Msg);
							} else {
								vm.payId = res.OrderId;
								ajax({ //支付
									url: "http://dsapi.ysd3g.com/api/OrderPay",
									dataType: "jsonp",
									data: {
										key: localStorage.getItem("key"),
										oId: vm.payId,
										payType: '1', 
										addressIdx: vm.list, //默认收货地址
										moeny: vm.totalPrice //总价
									},
									success: function(res) {
										if (res.Error) {
											alert(res.Msg)
										} else {
											var payment = "";
											plus.payment.getChannels(function(s) {
												var channel=s;
												for(var i=0;i<channel.length;i++){
													if(channel[i].id==vm.redio){
														var payment = channel[i];
													}
												}
												plus.payment.request(s[0], res.strJson, function() {
													vm.$toast.alert("支付操作成功！");
													localStorage.removeItem(orderId);
												}, function(e) {
													_this.$toast.fail(e.message);
												})
											}, function() {
												vm.$toast.alert("出现错误，请稍后再试！")
											})
										}
									}
								});
								vm.$toast.clear();
							}
						}
					});
				}
			}
		})
	</script>
</html